<template>
  <view class="qualification-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 身份证照片（人像面） -->
    <view class="upload-item">
      <view class="item-header">
        <text class="required">*</text>
        <text class="title">身份证照片（人像面）</text>
      </view>
      <view class="item-desc">请拍摄/上传彩色高清实拍身份证人像面照片</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('idCardFront')">
          <image 
            v-if="qualification && qualification.idCardFront" 
            :src="qualification.idCardFront" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.idCardFront }"
          @tap="handleUpload('idCardFront')"
        >上传</button>
      </view>
    </view>
    
    <!-- 身份证照片（国徽面） -->
    <view class="upload-item">
      <view class="item-header">
        <text class="required">*</text>
        <text class="title">身份证照片（国徽面）</text>
      </view>
      <view class="item-desc">请拍摄/上传彩色高清实拍身份证国徽面照片</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('idCardBack')">
          <image 
            v-if="qualification && qualification.idCardBack" 
            :src="qualification.idCardBack" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.idCardBack }"
          @tap="handleUpload('idCardBack')"
        >上传</button>
      </view>
    </view>
    
    <!-- 从业资格证照片 -->
    <view class="upload-item">
      <view class="item-header">
        <text class="required">*</text>
        <text class="title">从业资格证照片</text>
      </view>
      <view class="item-desc">请拍摄/上传本人从业资格证姓名所在页的高清实拍照片(请勿打码或遮挡)</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('qualification')">
          <image 
            v-if="qualification && qualification.qualification" 
            :src="qualification.qualification" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.qualification }"
          @tap="handleUpload('qualification')"
        >上传</button>
      </view>
    </view>
    
    <!-- 健康证照片 -->
    <view class="upload-item">
      <view class="item-header">
        <text class="required">*</text>
        <text class="title">健康证照片</text>
      </view>
      <view class="item-desc">请拍摄/上传本人有效期内的健康证高清实拍照片(请勿打码或遮挡)</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('health')">
          <image 
            v-if="qualification && qualification.health" 
            :src="qualification.health" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.health }"
          @tap="handleUpload('health')"
        >上传</button>
      </view>
    </view>
    
    <!-- 无犯罪记录证明 -->
    <view class="upload-item">
      <view class="item-header">
        <text class="title">无犯罪记录证明</text>
      </view>
      <view class="item-desc">请拍摄/上传本人无犯罪记录证明</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('criminalRecord')">
          <image 
            v-if="qualification && qualification.criminalRecord" 
            :src="qualification.criminalRecord" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.criminalRecord }"
          @tap="handleUpload('criminalRecord')"
        >上传</button>
      </view>
    </view>
    
    <!-- 学历证明 -->
    <view class="upload-item">
      <view class="item-header">
        <text class="title">学历证明</text>
      </view>
      <view class="item-desc">请拍摄/上传本人学历证明</view>
      <view class="upload-area">
        <view class="upload-box" @tap="handleUpload('education')">
          <image 
            v-if="qualification && qualification.education" 
            :src="qualification.education" 
            mode="aspectFill" 
            class="preview-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="iconfont icon-camera"></text>
          </view>
        </view>
        <button 
          class="upload-btn" 
          :class="{ uploaded: qualification && qualification.education }"
          @tap="handleUpload('education')"
        >上传</button>
      </view>
    </view>
  </view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
  components: {
    TechNavBar,
    NavBar
  },
  
  data() {
    return {
      qualification: null,
      techId: ''
    }
  },
  
  onLoad() {
    // 从本地存储获取techId
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.techId) {
      this.techId = userInfo.techId
      this.loadQualificationInfo()
    } else {
      uni.showToast({
        title: '未找到技师信息',
        icon: 'none'
      })
    }
  },
  
  methods: {
    // 加载资质信息
    async loadQualificationInfo() {
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/qualification/qualification/list`,
          method: 'GET',
          data: {
            technicianId: this.techId
          },
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })
        
        if (result.data.code === 200 && result.data.rows && result.data.rows.length > 0) {
          this.qualification = result.data.rows[0]
        }
      } catch (err) {
        console.error('获取资质信息失败:', err)
        uni.showToast({
          title: '获取资质信息失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 处理照片上传
    handleUpload(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          const tempFilePath = res.tempFilePaths[0]
          uni.showLoading({
            title: '上传中...'
          })
          
          try {
            // 1. 上传文件到MinIO
            const uploadResult = await uni.uploadFile({
              url: `${uni.$config.baseUrl}/common/upload`,
              filePath: tempFilePath,
              name: 'file',
              header: {
                'Authorization': uni.getStorageSync('token')
              }
            })
            
            const uploadData = JSON.parse(uploadResult.data)
            if (uploadData.code !== 200) {
              throw new Error(uploadData.msg || '上传失败')
            }

            // 2. 保存资质信息
            const qualificationData = {
              ...this.qualification,
              technicianId: this.techId,
              [type]: uploadData.url
            }

            const saveResult = await uni.request({
              url: `${uni.$config.baseUrl}/qualification/qualification`,
              method: 'PUT',
              data: qualificationData,
              header: {
                'Authorization': uni.getStorageSync('token')
              }
            })

            if (saveResult.data.code === 200) {
              // 更新本地qualification数据
              if (this.qualification) {
                this.qualification[type] = uploadData.url
              }
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              })
            } else {
              throw new Error(saveResult.data.msg || '保存失败')
            }
          } catch (err) {
            console.error('上传失败:', err)
            uni.showToast({
              title: err.message || '上传失败',
              icon: 'none'
            })
          } finally {
            uni.hideLoading()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.qualification-container {
  min-height: 100vh;
  background: #F5F5F5;
  .upload-item {
    background: #FFFFFF;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .required {
        color: #FF4B4B;
        margin-right: 8rpx;
        font-size: 32rpx;
      }
      
      .title {
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
      }
    }
    
    .item-desc {
      font-size: 28rpx;
      color: #999999;
      margin-bottom: 30rpx;
    }
    
    .upload-area {
      display: flex;
      align-items: flex-end;
      
      .upload-box {
        width: 200rpx;
        height: 200rpx;
        border: 2rpx solid #EEEEEE;
        border-radius: 8rpx;
        margin-right: 30rpx;
        overflow: hidden;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
        
        .upload-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #F8F8F8;
          
          .icon-camera {
            font-size: 48rpx;
            color: #CCCCCC;
          }
        }
      }
      
      .upload-btn {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background: #2B85E4;
        color: #FFFFFF;
        font-size: 28rpx;
        border-radius: 30rpx;
        padding: 0;
        
        &.uploaded {
          background: #F5F5F5;
          color: #666666;
        }
        
        &::after {
          border: none;
        }
      }
    }
  }
}
</style> 